<template>
  <ContentWrap class="data-collect-task" :bodyStyle="{ paddingTop: '5px' }">
    <back :backOption="backOption" />
    <div class="data-source-result-wrap h-full">
      <el-card shadow="hover" class="mt-16px">
        <template #header>
          <span>{{ infoOptions.data.taskName || '--' }}</span>
        </template>
        <ns-descriptions v-bind="infoOptions" />
      </el-card>

      <el-card shadow="hover" class="mt-16px p-16px">
        <el-tabs @tab-change="getColumn" v-model="activeName" v-if="dataType === 'db'">
          <el-tab-pane label="字段清单" name="fieldColumns">
            <el-form
              :model="searchValue"
              ref="formRef"
              label-width="90px"
              label-suffix=":"
              v-if="activeName === 'fieldColumns'"
            >
              <el-row>
                <el-col :span="6">
                  <el-form-item label="字段名称" prop="column">
                    <ns-input v-model="searchValue.column" clearable placeholder="请输入字段名称" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="字段描述" prop="comment">
                    <ns-input
                      v-model="searchValue.comment"
                      clearable
                      placeholder="请输入字段描述"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="所属表" prop="table">
                    <ns-input v-model="searchValue.table" clearable placeholder="请输入所属表" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="所属库" prop="database">
                    <ns-input v-model="searchValue.database" clearable placeholder="请输入所属库" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="归属机构" prop="deptId">
                    <el-cascader
                      ref="deptCascader"
                      v-model="searchValue.deptId"
                      placeholder="请选择归属机构"
                      :props="cascaderProps"
                      :options="deptList"
                      filterable
                      clearable
                      :filter-method="sysFilterMethod"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="归属系统" prop="sysId">
                    <el-cascader
                      v-model="searchValue.sysId"
                      placeholder="请选择归属系统"
                      :props="systemCascaderProps"
                      :options="systemList"
                      filterable
                      clearable
                      :filter-method="sysFilterMethod"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="分类" prop="classification">
                    <el-cascader
                      v-model="searchValue.classification"
                      placeholder="请选择分类"
                      :props="classificationCascaderProps"
                      :options="classificationList"
                      filterable
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="分级" prop="level">
                    <el-select v-model="searchValue.level" clearable placeholder="请选择分级">
                      <el-option
                        v-for="(level, levelIndex) in levelList"
                        :key="levelIndex"
                        :label="level.levelName"
                        :value="level.levelCode"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="数据源名称" prop="datasourceName">
                    <ns-input
                      v-model="searchValue.datasourceName"
                      clearable
                      placeholder="请输入数据源名称"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="资产IP" prop="ip">
                    <ns-input v-model="searchValue.ip" clearable placeholder="请输入资产IP" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="资产类型" prop="assetType">
                    <el-select
                      v-model="searchValue.assetType"
                      clearable
                      placeholder="请选择资产类型"
                      ><el-option
                        v-for="item in assetTypeList.database"
                        :label="item.showName"
                        :key="item.name"
                        :value="item.name"
                    /></el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6" class="text-right">
                  <el-button @click="search" type="primary">搜索</el-button>
                  <el-button @click="searchReset"> 重置</el-button>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="表清单" name="tableColumns">
            <el-form
              label-width="90px"
              label-suffix=":"
              v-if="activeName === 'tableColumns'"
              ref="formRef"
              :model="searchValue"
            >
              <el-row>
                <el-col :span="6">
                  <el-form-item label="表名称" prop="table">
                    <ns-input v-model="searchValue.table" clearable placeholder="请输入表名称" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="表描述" prop="remark">
                    <ns-input v-model="searchValue.remark" clearable placeholder="请输入表描述" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="所属库" prop="database">
                    <ns-input v-model="searchValue.database" clearable placeholder="请输入所属库" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="归属机构" prop="deptId">
                    <el-cascader
                      ref="deptCascader"
                      v-model="searchValue.deptId"
                      placeholder="请选择归属机构"
                      :props="cascaderProps"
                      :options="deptList"
                      filterable
                      clearable
                      :filter-method="sysFilterMethod"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="归属系统" prop="sysId">
                    <el-cascader
                      v-model="searchValue.sysId"
                      placeholder="请选择归属系统"
                      :props="systemCascaderProps"
                      :options="systemList"
                      filterable
                      clearable
                      :filter-method="sysFilterMethod"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="分类" prop="classification">
                    <el-cascader
                      v-model="searchValue.classification"
                      placeholder="请选择分类"
                      :props="classificationCascaderProps"
                      :options="classificationList"
                      filterable
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="分级" prop="level">
                    <el-select v-model="searchValue.level" clearable placeholder="请选择分级">
                      <el-option
                        v-for="(level, levelIndex) in levelList"
                        :key="levelIndex"
                        :label="level.levelName"
                        :value="level.levelCode"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="数据源名称" prop="datasourceName">
                    <ns-input
                      v-model="searchValue.datasourceName"
                      clearable
                      placeholder="请输入数据源名称"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="资产IP" prop="ip">
                    <ns-input v-model="searchValue.ip" clearable placeholder="请输入资产IP" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="资产类型" prop="assetType">
                    <el-select
                      v-model="searchValue.assetType"
                      clearable
                      placeholder="请选择资产类型"
                      ><el-option
                        v-for="item in assetTypeList.database"
                        :label="item.showName"
                        :key="item.name"
                        :value="item.name"
                    /></el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="text-right">
                  <el-button @click="search" type="primary">搜索</el-button>
                  <el-button @click="searchReset"> 重置</el-button>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="schema" name="schemaColumns">
            <el-form
              :model="searchValue"
              ref="formRef"
              label-width="100px"
              label-suffix=":"
              v-if="activeName === 'schemaColumns'"
            >
              <el-row>
                <el-col :span="6">
                  <el-form-item label="schema名称" prop="schema">
                    <ns-input
                      v-model="searchValue.schema"
                      clearable
                      placeholder="请输入schema名称"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="归属机构" prop="deptId">
                    <el-cascader
                      ref="deptCascader"
                      v-model="searchValue.deptId"
                      placeholder="请选择归属机构"
                      :props="cascaderProps"
                      :options="deptList"
                      filterable
                      clearable
                      :filter-method="sysFilterMethod"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="归属系统" prop="sysId">
                    <el-cascader
                      v-model="searchValue.sysId"
                      placeholder="请选择归属系统"
                      :props="systemCascaderProps"
                      :options="systemList"
                      filterable
                      clearable
                      :filter-method="sysFilterMethod"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="数据源名称" prop="datasourceName">
                    <ns-input
                      v-model="searchValue.datasourceName"
                      clearable
                      placeholder="请输入数据源名称"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="资产类型" prop="assetType">
                    <el-select
                      v-model="searchValue.assetType"
                      clearable
                      placeholder="请选择资产类型"
                      ><el-option
                        v-for="item in assetTypeList.database"
                        :label="item.showName"
                        :key="item.name"
                        :value="item.name"
                    /></el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="18" class="text-right">
                  <el-button @click="search" type="primary">搜索</el-button>
                  <el-button @click="searchReset"> 重置</el-button>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="库清单" name="baseColumns">
            <el-form
              :model="searchValue"
              ref="formRef"
              label-width="100px"
              label-suffix=":"
              v-if="activeName === 'baseColumns'"
            >
              <el-row>
                <el-col :span="6">
                  <el-form-item label="库名称" prop="database">
                    <ns-input v-model="searchValue.database" clearable placeholder="请输入库名称" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="归属机构" prop="deptId">
                    <el-cascader
                      ref="deptCascader"
                      v-model="searchValue.deptId"
                      placeholder="请选择归属机构"
                      :props="cascaderProps"
                      :options="deptList"
                      filterable
                      clearable
                      :filter-method="sysFilterMethod"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="归属系统" prop="sysId">
                    <el-cascader
                      v-model="searchValue.sysId"
                      placeholder="请选择归属系统"
                      :props="systemCascaderProps"
                      :options="systemList"
                      filterable
                      clearable
                      :filter-method="sysFilterMethod"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="数据源名称" prop="datasourceName">
                    <ns-input
                      v-model="searchValue.datasourceName"
                      clearable
                      placeholder="请输入数据源名称"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="资产类型" prop="assetType">
                    <el-select
                      v-model="searchValue.assetType"
                      clearable
                      placeholder="请选择资产类型"
                      ><el-option
                        v-for="item in assetTypeList.database"
                        :label="item.showName"
                        :key="item.name"
                        :value="item.name"
                    /></el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="18" class="text-right">
                  <el-button @click="search" type="primary">搜索</el-button>
                  <el-button @click="searchReset"> 重置</el-button>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="组件清单" name="componentColumns">
            <el-form
              :model="searchValue"
              ref="formRef"
              label-width="100px"
              label-suffix=":"
              v-if="activeName === 'componentColumns'"
            >
              <el-row>
                <el-col :span="6">
                  <el-form-item label="数据源名称" prop="datasourceName">
                    <ns-input
                      v-model="searchValue.datasourceName"
                      clearable
                      placeholder="请输入数据源名称"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="归属机构" prop="deptId">
                    <el-cascader
                      ref="deptCascader"
                      v-model="searchValue.deptId"
                      placeholder="请选择归属机构"
                      :props="cascaderProps"
                      :options="deptList"
                      filterable
                      clearable
                      :filter-method="sysFilterMethod"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="归属系统" prop="sysId">
                    <el-cascader
                      v-model="searchValue.sysId"
                      placeholder="请选择归属系统"
                      :props="systemCascaderProps"
                      :options="systemList"
                      filterable
                      clearable
                      :filter-method="sysFilterMethod"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="资产类型" prop="assetType">
                    <el-select
                      v-model="searchValue.assetType"
                      clearable
                      placeholder="请选择资产类型"
                      ><el-option
                        v-for="item in assetTypeList.database"
                        :label="item.showName"
                        :key="item.name"
                        :value="item.name"
                    /></el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24" class="text-right">
                  <el-button @click="search" type="primary">搜索</el-button>
                  <el-button @click="searchReset"> 重置</el-button>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <div v-if="dataType === 'file'">
          <el-form :model="searchValue" ref="formRef" label-width="90px" label-suffix=":">
            <el-row>
              <el-col :span="6">
                <el-form-item label="文件名称" prop="fileName">
                  <ns-input v-model="searchValue.fileName" clearable placeholder="请输入文件名称" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="文件类型" prop="fileType">
                  <ns-input v-model="searchValue.fileType" clearable placeholder="请输入文件类型" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="资产IP" prop="ip">
                  <ns-input v-model="searchValue.ip" clearable placeholder="请输入资产IP" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="资产类型" prop="assetType">
                  <el-select v-model="searchValue.assetType" clearable placeholder="请选择资产类型"
                    ><el-option
                      v-for="item in assetTypeList.file"
                      :label="item.showName"
                      :key="item.name"
                      :value="item.name"
                  /></el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="数据源名称" prop="datasourceName">
                  <ns-input
                    v-model="searchValue.datasourceName"
                    clearable
                    placeholder="请输入数据源名称"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="归属机构" prop="deptId">
                  <el-cascader
                    ref="deptCascader"
                    v-model="searchValue.deptId"
                    placeholder="请选择归属机构"
                    :props="cascaderProps"
                    :options="deptList"
                    filterable
                    clearable
                    :filter-method="sysFilterMethod"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="归属系统" prop="sysId">
                  <el-cascader
                    v-model="searchValue.sysId"
                    placeholder="请选择归属系统"
                    :props="systemCascaderProps"
                    :options="systemList"
                    filterable
                    clearable
                    :filter-method="sysFilterMethod"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="分类" prop="classification">
                  <el-cascader
                    v-model="searchValue.classification"
                    placeholder="请选择分类"
                    :props="classificationCascaderProps"
                    :options="classificationList"
                    filterable
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="分级" prop="level">
                  <el-select v-model="searchValue.level" clearable placeholder="请选择分级">
                    <el-option
                      v-for="(level, levelIndex) in levelList"
                      :key="levelIndex"
                      :label="level.levelName"
                      :value="level.levelCode"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24" class="text-right">
                <el-button @click="search" type="primary">搜索</el-button>
                <el-button @click="searchReset">重置</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <el-button
          class="mb5"
          plain
          @click="handleExport"
          :loading="exportLoading"
          v-hasPermi="['infra:config:export']"
          >导出</el-button
        >
        <AsyncTable
          :columns="tableOption.columns"
          :fetchData="fetchData"
          ref="tableRef"
          :showSift="false"
        />
      </el-card>
    </div>
  </ContentWrap>
</template>
<script setup lang="tsx">
import back from '@/components/Back/index.vue'
import { useRoute } from 'vue-router'
import { sysFilterMethod } from '@/utils/selectFilter'
import { columns } from './columnsDic'
import { getAssetTypeList } from '@/api/dataSourceManage/index'
import * as api from '@/api/asset/taskManage/dataCollect'
import { getSimpleDeptList } from '@/api/system/dept'
import { handleTree } from '@/utils/tree'
import download from '@/utils/download'
import { DescriptionsProps } from '@/types/descriptions'
import { getSimpleSystemList } from '@/api/asset/taskManage'
import { dataClassificationTree } from '@/api/dataStandards/classification/index'
import { levelPage } from '@/api/strategyManage/level/index'

const systemList = ref([])
const route = useRoute()
const editId = ref(route.query.id)
const latestHistoryId = ref(route.query.latestHistoryId)
const jumpType = ref(route.query.jumpType)
const formRef = ref()
const tableRef = ref()
const deptList = ref<Tree[]>([])
const exportLoading = ref(false)
const dataType = ref(route.query.dataType)
const message = useMessage() // 消息弹窗
onMounted(async () => {
  tableOption.columns = dataType.value === 'file' ? columns.fileColumns : columns.fieldColumns

  getDeptList()
  getSystemList()
  getLevelList()
  getAssetType()
  getClassificationList()
  let data = await api.collectAllOverview({ taskId: editId.value })
  infoOptions.data = data
})

const classificationCascaderProps = ref({
  checkStrictly: true,
  label: 'text',
  value: 'text',
  children: 'children',
  emitPath: false
})
const queryParams = ref({
  taskId: editId.value,
  latestHistoryId: latestHistoryId.value
})
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await api.exportCollectResult({ ...queryParams.value, ...searchValue.value })
    download.excel(data, `${ListType[searchValue.value.dataType]}清单.xls`)
  } finally {
    exportLoading.value = false
  }
}
const ListType = {
  asset: '组件',
  file: '文件',
  column: '字段',
  table: '表',
  schema: 'schema',
  db: '库'
}
const assetTypeList = reactive({
  database: {},
  file: {}
})
const tableOption = reactive({
  columns: [],
  data: []
})
const backOption = reactive({
  title: `${dataType.value === 'file' ? '文件服务器' : '数据库'}采集结果`
})
const cascaderProps = {
  checkStrictly: true,
  label: 'name',
  value: 'id',
  children: 'children',
  emitPath: false
}
const systemCascaderProps = {
  checkStrictly: true,
  label: 'value',
  value: 'id',
  children: 'children',
  emitPath: false
}
const dbInfo = [
  { label: '数据来源', key: 'collectTargetTypeName' },
  {
    label: `${jumpType.value === '2' ? '数据标准' : '扫描策略'}模板：`,
    key: `${jumpType.value === '2' ? 'dataStandardName' : 'scanTemplateName'}`
  },
  { label: '启动时间', key: 'startTime' },
  { label: '完成时间', key: 'finishTime' },
  { label: '执行人', key: 'executorName' },
  { label: '扫描数据源数', key: 'scanAssetNum' },
  { label: '扫描数据库数', key: 'scanDbNum' },
  { label: '扫描失败数据源数', key: 'failAssetNum' }
]
const fileInfo = [
  { label: '数据来源', key: 'collectTargetTypeName' },
  { label: '扫描策略模板：', key: 'scanTemplateName' },
  { label: '启动时间', key: 'startTime' },
  { label: '完成时间', key: 'finishTime' },
  { label: '执行人', key: 'executorName' },
  { label: '扫描数据源数', key: 'scanAssetNum' },
  { label: '扫描文件服务器数', key: 'scanFileServerNum' },
  { label: '扫描失败数据源数', key: 'failAssetNum' }
]
const infoOptions: DescriptionsProps = reactive({
  column: 3,
  labelSuffix: '：',
  labelWidth: '140px',
  columns: dataType.value === 'file' ? fileInfo : dbInfo,
  data: {}
})
const searchValue = ref({
  fileName: '',
  fileType: '',
  datasourceName: '',
  assetType: '',
  dataType: dataType.value == 'db' ? 'column' : 'file',
  ip: '',
  database: '',
  schema: '',
  table: '',
  column: '',
  comment: '',
  deptId: '',
  sysId: '',
  remark: ''
})
const fetchData = async ({ page, pageSize }) => {
  const { data, count } = await api.collectList({
    page,
    pageSize,
    latestHistoryId: latestHistoryId.value || '',
    ...searchValue.value
  })
  return { data, count }
}

function traverseTree(data) {
  const updatedTree = []
  for (let i = 0; i < data.length; i++) {
    const node = data[i] // 创建新节点并添加 disable 属性
    if (node.pid == '-1') {
      node.disabled = true
    }
    updatedTree.push(node)
    if (node.children && node.children.length > 0) {
      node.children = traverseTree(node.children) // 递归遍历子节点并更新子树结构
    }
  }
  return updatedTree
}

const classificationList = ref([])
const getClassificationList = async () => {
  const data = await dataClassificationTree({ type: dataType.value == 'file' ? 0 : 1 })
  classificationList.value = traverseTree(data)
}
const levelList = ref([])
const getLevelList = async () => {
  const { data } = await levelPage({ page: 1, pageSize: 999 })
  console.log('data', data)
  levelList.value = data
}
const tableType = {
  fieldColumns: 'column',
  tableColumns: 'table',
  schemaColumns: 'schema',
  baseColumns: 'db',
  componentColumns: 'asset',
  fileColumns: 'file'
}
const activeName = ref('fieldColumns')
const getColumn = (value: string) => {
  formRef.value.resetFields()
  let colKey: string = ''
  if (value == 'dataAsset') {
    activeName.value = 'fieldColumns'
    colKey = 'fieldColumns'
    searchValue.value.dataType = tableType['fieldColumns']
  } else {
    searchValue.value.dataType = tableType[value]
    colKey = value
  }
  tableOption.columns = []
  nextTick(() => {
    tableOption.columns = columns[colKey]
    tableRef.value.resetPage()
    tableRef.value.fetchData()
  })
}
async function getSystemList() {
  const data = await getSimpleSystemList()
  systemList.value = handleTree(data, 'id', 'pid')
}
async function getAssetType() {
  if (dataType.value === 'db') {
    assetTypeList.database = await getAssetTypeList({ datasourceType: 1 })
  } else if (dataType.value === 'file') {
    assetTypeList.file = await getAssetTypeList({ datasourceType: 2 })
  }
}
async function getDeptList() {
  const data = await getSimpleDeptList()
  deptList.value = data
}
const searchReset = () => {
  tableRef.value.resetPage()
  formRef.value.resetFields()
  tableRef.value.fetchData()
}
const search = () => {
  tableRef.value.resetPage()
  tableRef.value.fetchData()
}
</script>

<style lang="scss">
.data-collect-task {
  .data-source-result-wrap {
    .el-card__header {
      padding: 10px 16px;
    }

    .el-card__body {
      padding: 20px 0px;
    }

    .el-descriptions__table {
      width: 100%;
    }

    .el-descriptions__label {
      color: #606266;
    }

    .el-descriptions__content {
      font-size: 14px;
      vertical-align: top;
      color: #606266;
    }
  }

  .el-cascader {
    width: 100%;
  }

  .el-form .el-select {
    width: 100%;
  }

  :deep(.hide-expand .cell) {
    display: none;
  }

  :deep(.el-form .el-cascader) {
    width: 100%;
  }

  :deep(.operate-btn .el-button.is-text) {
    padding: 0 10px 0 0;
  }
}
</style>
